<!-- 添加设备 -->
<template>
	<view class="pageview flex">
		<view class="menu">
			<scroll-view scroll-y scroll-with-animation v-if="proTypelist.length > 0">
				<view v-for="(item, index) in proTypelist" :key="index" class="tab-bar-item flex align-center"
					:class="[currentTab == index ? 'active' : '', { prev: index == currentTab - 1, next: index == currentTab + 1 }]"
					@tap.stop="swichNav(index)">
					<view class="name">
						{{ item.prodTypeName }}
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="flex-sub tab-view">
			<mescroll-uni ref="mescrollItem0" :fixed="false" @init="mescrollInit" :down="downOption" @down="downCallback"
				:up="upOption" @up="upCallback">
				<view class="devicelist flex justify-between flex-wrap">
					<view class="item" v-for="(item, index) in deviceTypelist" :key="index" @tap="bindDevice(item)">
						<view class="imgbox">
							<image :src="item.imgUrl" mode="aspectFit"></image>
						</view>
						<view>{{ item.deviceTypeName }}</view>
					</view>
				</view>
			</mescroll-uni>
		</view>
	</view>
</template>

<script>
	import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				proTypelist: [],
				deviceTypelist: [],
				currentTab: 0
			};
		},
		created() {
			this.getProTypeList();
		},
		methods: {
			getProTypeList() {
				this.$postAction(this.$deviceapi.getProTypeList, {}).then(res => {
					this.proTypelist = [{
							prodTypeName: '全部产品',
							prodTypeId: ''
						},
						...res
					];
					this.getDeviceTypeList();
				});
			},
			getDeviceTypeList() {
				let param = {};
				if (this.currentTab > 0) {
					param.prodTypeId = this.proTypelist[this.currentTab].prodTypeId;
				}
				this.$postAction(this.$deviceapi.getDeviceTypeList, param).then(res => {
					if (res && res.length > 0) {
						this.deviceTypelist = res.map(item => {
							return {
								...item,
								imgUrl: this.filterUrl + item.imgUrl.split(';')[0]
							};
						});
					} else {
						this.deviceTypelist = [];
					}
				});
			},
			swichNav(index) {
				if (this.currentTab != index) {
					this.currentTab = index;
					this.getDeviceTypeList();
				}
			},
			bindDevice(device) {
				let path = '';
				switch (device.deviceTypeCode) {
					case 'O2Max':
					case 'O2Ring': {
						path = '/pages/device/o2device';
						break;
					}
					case 'BP2A': {
						path = '/pages/device/bp2device';
						break;
					}
					case 'V3': {
						path = '/pages/device/v3device';
						break;
					}
					case 'F2Pro': {
						path = '/pages/device/f2device';
						break;
					}
					case 'ER': {
						path = '/pages/device/erdevice';
						break;
					}
					case 'GM501': {
						path = '/pages/device/dmdevice';
						break;
					}
				}
				this.$Router.push({
					path: path + '?deviceType=' + device.deviceTypeCode + '&deviceTypeId=' + device.deviceTypeId
				});
			}
		}
	};
</script>

<style scoped lang="scss">
	.pageview {
		background: #fff;
	}

	.menu {
		height: 100vh;
		width: 172upx;
		overflow: auto;
		text-align: center;
		border-radius: 0 12upx 0 0;
		background: #f6f6f6;
		padding-top: 36rpx;

		.tab-bar-item {
			background: #f6f6f6;
			color: #666;
			font-size: 28upx;
			font-weight: 400;
			text-align: center;
			margin: 0 auto;
			padding: 28upx 6upx 28upx 32upx;

			.icon {
				width: 32upx;
				height: 32upx;
				vertical-align: middle;
				margin-top: -6upx;
			}

			.name {
				width: 4em;
				position: relative;

				.tag {
					position: absolute;
					top: -20upx;
					right: -20upx;
				}
			}

			&.prev {
				border-radius: 0 0 20upx 0;
			}

			&.next {
				border-radius: 0 20upx 0 0;
			}

			&.active {
				color: #1c1c1e;
				background: #fff;
				font-weight: 500;
				position: relative;
				border-radius: 0px;

				&::after {
					position: absolute;
					top: 0;
					bottom: 0;
					left: 0;
					content: '';
					width: 6upx;
					border-radius: 0px 20px 20px 0px;
					background: var(--nav-bg);
				}
			}
		}
	}

	.tab-view {
		/* height: 100vh; */
		overflow: auto;
		// background: #fff;

		.devicelist {
			margin-top: 16upx;
			padding: 20upx 20upx 0;
		}

		.item {
			width: calc(50% - 10upx);
			background: #fff;
			border-radius: 20upx;
			box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
			padding: 20upx;
			text-align: center;
			margin-bottom: 20upx;
			font-size: 24upx;

			.imgbox {
				width: 140upx;
				height: 140upx;
				margin: 0 auto;

				image {
					display: block;
					width: 100%;
					height: 100%;
				}
			}
		}
	}
</style>